<template>
    <view>
        <uni-section v-if="daySessionList.length > 0" title="今天" type="line">
            <view class="example-body">
                <uni-row v-for="item in daySessionList" :key="item.sessionId">
                    <uni-col>
                        <view class="demo-uni-col dark_deep">
                            <view class="text">{{ item.title }}</view>

                            <view class="tag-view">
                                <uni-tag
                                    text="继续对话"
                                    type="primary"
                                    @click="chickSession(item.sessionId)"
                                />
                            </view>
                            <view class="tag-view">
                                <uni-tag text="删除" @click="delSessionFun(item.sessionId)" />
                            </view>
                        </view>
                    </uni-col>
                </uni-row>
            </view>
        </uni-section>
        <uni-section v-if="yesDaySessionList.length > 0" title="昨天" type="line">
            <view class="example-body">
                <uni-row v-for="item in yesDaySessionList" :key="item.sessionId">
                    <uni-col>
                        <view class="demo-uni-col dark_deep">
                            <view class="text">{{ item.title }}</view>
                            <view class="tag-view">
                                <uni-tag
                                    text="继续对话"
                                    type="primary"
                                    @click="chickSession(item.sessionId)"
                                />
                            </view>
                            <view class="tag-view">
                                <uni-tag text="删除" />
                            </view>
                        </view>
                    </uni-col>
                </uni-row>
            </view>
        </uni-section>
        <uni-section v-if="someDaySessionList.length > 0" title="前些天" type="line">
            <view class="example-body">
                <uni-row v-for="item in someDaySessionList" :key="item.sessionId">
                    <uni-col>
                        <view class="demo-uni-col dark_deep">
                            <view class="text">{{ item.title }}</view>

                            <view class="tag-view">
                                <uni-tag
                                    text="继续对话"
                                    type="primary"
                                    @click="chickSession(item.sessionId)"
                                />
                            </view>
                            <view class="tag-view">
                                <uni-tag text="删除" />
                            </view>
                        </view>
                    </uni-col>
                </uni-row>
            </view>
        </uni-section>
        <uni-section v-if="longLongDaySessionList.length > 0" title="好久以前" type="line">
            <view class="example-body">
                <uni-row v-for="item in longLongDaySessionList" :key="item.sessionId">
                    <uni-col>
                        <view class="demo-uni-col dark_deep">
                            <view class="text">{{ item.title }}</view>
                            <view class="tag-view">
                                <uni-tag
                                    text="继续对话"
                                    type="primary"
                                    @click="chickSession(item.sessionId)"
                                />
                            </view>
                            <view class="tag-view">
                                <uni-tag text="删除" />
                            </view>
                        </view>
                    </uni-col>
                </uni-row>
            </view>
        </uni-section>
    </view>
</template>

<script lang="ts" setup>
    import type { GptSessionVO } from '@/types/chatgpt';
    import { ref } from 'vue';
    import { onShow } from '@dcloudio/uni-app';
    import { delSession, getSessionList } from '@/api/chatgpt';

    const daySessionList = ref<GptSessionVO[]>([]);
    const yesDaySessionList = ref<GptSessionVO[]>([]);
    const someDaySessionList = ref<GptSessionVO[]>([]);
    const tenDaySessionList = ref<GptSessionVO[]>([]);
    const longLongDaySessionList = ref<GptSessionVO[]>([]);

    onShow(async () => {
        const sessions = await getSessionList();
        initData(sessions.data);
    });

    function chickSession(sessionId: string) {
        //uni.navigateTo() 无法跳转到tabbar的页面 switchTab无法传递参数
        // 通过本地保存
        uni.setStorageSync('sessionId', sessionId);
        uni.switchTab({
            url: '/pages/chat/chat'
        });
    }

    async function delSessionFun(sessionId: string) {
        await delSession(sessionId);
        const sessions = await getSessionList();
        initData(sessions.data);
    }

    function initData(data: GptSessionVO[]) {
        daySessionList.value = [];
        yesDaySessionList.value = [];
        someDaySessionList.value = [];
        tenDaySessionList.value = [];
        longLongDaySessionList.value = [];

        if (data.length > 0) {
            for (let i = 0; i < data.length; i++) {
                let at = data.at(i);
                let time;
                if (at) {
                    time = new Date(at.createTime);
                    time.setHours(0, 0, 0, 0);
                }
                if (time && time <= today() && time > oldDay(1)) {
                    if (at) daySessionList.value.push(at);
                }

                if (time && time <= oldDay(1) && time > oldDay(2)) {
                    if (at) yesDaySessionList.value.push(at);
                }

                if (time && time <= oldDay(2) && time > oldDay(10)) {
                    if (at) someDaySessionList.value.push(at);
                }

                if (time && time <= oldDay(10)) {
                    if (at) tenDaySessionList.value.push(at);
                }
                if (at) longLongDaySessionList.value.push(at);
            }
        }
    }

    function oldDay(limit: number) {
        const today = new Date();
        const fiveDaysAgo = new Date();
        fiveDaysAgo.setDate(today.getDate() - limit);

        const year = fiveDaysAgo.getFullYear();
        const month = fiveDaysAgo.getMonth() + 1; // 月份从0开始，需要加1
        const day = fiveDaysAgo.getDate();
        return new Date(`${year}-${month}-${day}`);
    }

    function today() {
        const today = new Date();
        const year = today.getFullYear();
        const month = today.getMonth() + 1; // 月份从0开始，需要加1
        const day = today.getDate();
        return new Date(`${year}-${month}-${day}`);
    }
</script>

<style lang="scss" scoped>
    .demo-uni-row {
        margin-bottom: 10px;

        // 组件在小程序端display为inline
        // QQ、抖音小程序文档写有 :host，但实测不生效
        // 百度小程序没有 :host
        /* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
        display: block;
        /* #endif */
    }

    .tag-view {
        margin: 0 5px;
    }

    .text {
        margin-left: 10px;
        max-width: 180px;
        width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap; /*文本不换行，这样超出一行的部分被截取，显示...*/
    }

    // 支付宝小程序没有 demo-uni-row 层级
    // 微信小程序使用了虚拟化节点，没有 demo-uni-row 层级
    /* #ifdef MP-ALIPAY || MP-WEIXIN */
    ::v-deep .uni-row {
        margin-bottom: 10px;
    }

    /* #endif */

    .demo-uni-col {
        height: 65px;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin: 0 20px;
        padding: 0 10px;
    }

    .dark_deep {
        background-color: #c6d1e5;
    }

    .dark {
        background-color: #d3dce6;
    }

    .light {
        background-color: #e5e9f2;
    }

    .example-body {
        /* #ifndef APP-NVUE */
        display: block;
        /* #endif */
        padding: 5rpx 10rpx 0;
        overflow: hidden;
    }
</style>
